<template>
    <div class="card-table">
        <div class="header">
            <div @click="$router.go(-1)" class="goBackIcon">
                <i class="el-icon-arrow-left" style="margin-right:1px;"></i>返回
            </div>
            <div style="margin-left:16px;">{{ edit ? '修改一炉工单' : '新增一炉工单' }}</div>
        </div>
        <div class="main">
            <!-- <el-alert style="margin-bottom:12px;" title="先选择成型工单再添加装炉个数" type="warning" show-icon>
            </el-alert> -->
            <div>装炉信息</div>
            <el-form size="medium" :model="form" :rules="rules" ref="form" label-width="120px" class="demo-form">
                <el-form-item style="margin:24px;" label="装炉日期" prop="chargeTime">
                    <el-date-picker style="width:300px;" v-model="form.chargeTime" type="datetime" placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item style="margin:24px;" label="炉号">
                    <el-select v-model="value" placeholder="请选择" @change="furnaceNumber">
                        <el-option v-for="item in 20" :key="item" :label="String(item)" :value="String(item)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin:24px;" label="温控架">
                    <el-select v-model="temperatureValue" placeholder="请选择" @change="tempControl">
                        <el-option v-for="item in 6" :key="item" :label="`B${item + 1}`" :value="`B${item+1}`">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin:24px;" label="产品" prop="describe">
                    <el-input v-model="form.describe" style="width: 220px;"></el-input>
                </el-form-item>
                <el-form-item style="margin:24px;" label="数量" prop="">
                    <el-input v-model="form.count" style="width: 220px;"></el-input>
                </el-form-item>
                <el-form-item style="margin:24px;" label="重量" prop="">
                    <el-input v-model="form.weight" style="width: 220px;"></el-input>
                </el-form-item>
                <el-form-item style="margin:24px;" label="装炉方式" prop="">
                    <el-input v-model="form.chargeType" style="width: 220px;"></el-input>
                </el-form-item>
                <div style="border-bottom: thin solid rgb(228, 236, 240);"></div>
                <div style="padding-top: 10px">生产信息</div>
                <el-form-item style="margin:24px;" label="点火时间" prop="">
                    <el-time-picker v-model="form.startTime" placeholder="任意时间点" format="HH:mm" value-format="HH:mm">
                    </el-time-picker>
                </el-form-item>
                <el-form-item style="margin:24px;" label="运行时间" prop="">
                    <el-input placeholder="请输入内容" v-model="mathRunTime" :disabled="true" style="width: 220px;">
                    </el-input>
                </el-form-item>
                <el-form-item style="margin:24px;" label="闭火时间" prop="">
                    <el-time-picker v-model="form.endTime" placeholder="任意时间点" format="HH:mm" value-format="HH:mm">
                    </el-time-picker>
                </el-form-item>
                <div style="border-bottom: thin solid rgb(228, 236, 240);"></div>
                <div style="padding-top: 10px">出炉信息</div>
                <el-form-item style="margin:24px;" label="出炉日期" prop="stoveOutTime">
                    <el-date-picker style="width:300px;" v-model="form.stoveOutTime" type="datetime"
                        placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <div style="border-bottom: thin solid rgb(228, 236, 240);"></div>
                <div style="padding: 10px 0 20px 0;">附件上传</div>
                <div style="width:300px">
                    <el-upload 
                    class="upload-demo" 
                    action="https://jsonplaceholder.typicode.com/posts/" 
                    multiple
                    :limit="1" 
                    :on-change="(file) => handleChange('', file)" 
                    :on-remove="() => handleRemove('','chargeTable')"
                    :file-list="fileList"
                    :auto-upload="false"> 
                        <el-button size="small" type="primary">装炉表</el-button>
                    </el-upload>
                    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="1"
                        :on-change="(file) => handleChange(1, file)" :on-remove="() => handleRemove(1,'curveTable')" :file-list="fileList1" :auto-upload="false">
                        <el-button size="small" type="primary">曲线表</el-button>
                    </el-upload>
                    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="1"
                        :on-change="(file) => handleChange(2, file)" :on-remove="() => handleRemove(2,'queInspectionTable')" :file-list="fileList2" :auto-upload="false">
                        <el-button size="small" type="primary">质检表</el-button>
                    </el-upload>
                </div>
                <div style="border-bottom: thin solid rgb(228, 236, 240); margin-top: 30px;"></div>
            </el-form>
        </div>
        <div class="footer">
            <div class="footer-wrap">
                <el-button icon="el-icon-document-checked" @click="submitForm('form')" type="primary">提 交</el-button>
                <el-button v-if="!edit" icon="el-icon-refresh-right" plain type="primary" @click="resetForm('form')">重 置
                </el-button>
                <el-button icon="el-icon-document-remove" @click="$router.go(-1)">取 消</el-button>
            </div>
        </div>
    </div>
</template>

<script>
// crucibleFirstRoastCreate
// crucibleFirstRoastUpdate
import { oneFurnaceUpload, oneFurnaceCreate, oneFurnaceGet, oneFurnaceUpdate } from '@/api/crucible.js'
import { nomalPages } from '@/mixin'
export default {
    name: 'test',
    mixins: [nomalPages],
    components: {},
    data() {
        return {
            fileList: [],
            fileList1: [],
            fileList2: [],
            value: '',
            temperatureValue: '',
            dialogTableVisible: false,
            allSelectNumber: 0,
            selectRow: '',
            selectIndex: '', // 点击选择工单时的行的索引($index)
            inputNumber: [],
            edit: false,
            tableData: [
                {
                    crucibleForming: {

                    },
                    crucibleNumber: ''
                }
            ],
            form: {
                describe: '',
                count: '',
                weight: '',
                chargeType: '',
                chargeTime: '',
                stoveOutTime: '',
                startTime: '',
                runTime: '',
                endTime: '',
            },
            rules: {
                describe: [
                    { required: true, message: '请输入文本', trigger: 'change' }
                ],
                crucibleNumber: [
                    { required: true, message: '请输入装炉个数', trigger: 'change' }
                ],
                chargeTime: [
                    { required: true, message: '请输入装炉日期', trigger: 'change' }
                ],
                stoveOutTime: [
                    { required: true, message: '请输入出炉日期', trigger: 'change' }
                ],
            }
        }
    },
    computed: {
        mathRunTime() {
            let startTime = this.form.startTime
            let endTime = this.form.endTime
            let runTime = parseInt(endTime.slice(0, endTime.indexOf(':'))) - parseInt(startTime.slice(0, startTime.indexOf(':')))
            if ((startTime && endTime) && runTime >= 0) {
                if (parseInt(endTime.slice(endTime.indexOf(':') + 1)) - parseInt(startTime.slice(startTime.indexOf(':') + 1)) < 0) {
                    if (runTime === 0) {
                        return;
                    } else {
                        return String(runTime - 1)
                    }
                } else {
                    return String(runTime)
                }
            } else {
                return;
            }
        }
    },
    watch: {
        mathRunTime() {
            this.form.runTime = this.mathRunTime
        }
    },
    created() {
        if (this.$route.query.row !== undefined) {
            const payload = JSON.parse(this.$route.query.row)
            this.value = payload.stoveNumber
            this.temperatureValue = payload.stoveCode
            this.edit = true
            if(payload.chargeTable){
                this.fileList = [{ name: payload.chargeTable, url: payload.chargeTable }];
            }
            if(payload.curveTable){
                this.fileList1 = [{ name: payload.curveTable, url: payload.curveTable }];
            }
            if(payload.queInspectionTable){
                this.fileList2 = [{ name: payload.queInspectionTable, url: payload.queInspectionTable }]
            }
            this.form = payload
            console.log(this.form);
        }
    },
    mounted() {},
    methods: {
        submitForm(formName) {
            console.log('提交',this.form);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const payload = JSON.parse(JSON.stringify(this.form))
                        let formData = new FormData()
                        if (this.fileList[0]){
                            if (!this.fileList[0].url){
                                formData.append('chargeTable', this.fileList[0]); 
                            }                         
                        }
                        if (this.fileList1[0]){
                            if (!this.fileList1[0].url){
                                formData.append('curveTable', this.fileList1[0]);
                            }
                        }
                        if (this.fileList2[0]){
                            if (!this.fileList2[0].url){
                                formData.append('queInspectionTable', this.fileList2[0]);
                            }
                        }
                        oneFurnaceUpload(formData).then((res)=>{
                            if(res.data.data){
                                payload.chargeTable = res.data.data.chargeTable || '';
                                payload.curveTable = res.data.data.curveTable || '';
                                payload.queInspectionTable = res.data.data.queInspectionTable || '';
                            }
                            // 判断是增加还是修改
                            if(this.edit){
                                this.fileList[0] && (payload.chargeTable = this.fileList[0].url || payload.chargeTable)
                                this.fileList1[0] && (payload.curveTable = this.fileList1[0].url || payload.curveTable)
                                this.fileList2[0] && (payload.queInspectionTable = this.fileList2[0].url || payload.queInspectionTable)
                                oneFurnaceUpdate(payload).then(res => {
                                    console.log(res);
                                    if (res.data.code === 200) {
                                        this.$message({
                                            message: '修改成功',
                                            type: 'success'
                                        })
                                        this.$router.go(-1)
                                    } else {
                                        this.$message({
                                            message: res.data.message,
                                            type: 'warning'
                                        })
                                    }
                                })
                            }else{
                                oneFurnaceCreate(payload).then(res => {
                                    if (res.data.code === 200) {
                                        this.$message({
                                            message: '添加成功',
                                            type: 'success'
                                        })
                                        this.$router.go(-1)
                                    } else {
                                        this.$message({
                                            message: res.data.message,
                                            type: 'warning'
                                        })
                                    }
                                })  
                            }                 
                        })
                    
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
            this.selectRow = ''
            this.form.crucibleForming = ''
        },
        getAllData() {
            const params = {
                isQualityTesting: true
            }
            oneFurnaceGet(params).then(res => {
                // if (res.data.code === 200) {
                //     var tableData = res.data.data.pageData
                //     if (this.$route.query.row !== undefined) {
                //         for (let index = 0; index < tableData.length; index++) {
                //             const each = tableData[index]
                //             if (each._id === this.form.crucibleForming._id) {
                //                 tableData[index].prepareStoveNum += this.form.crucibleNumber
                //             }
                //         }
                //     }
                //     this.tableData = tableData
                // } else {
                //     this.$message({
                //         message: res.data.message,
                //         type: 'warning'
                //     })
                // }
            })
        },
        // 选择炉号向form中增加数据
        furnaceNumber(value) {
            this.form.stoveNumber = value
            console.log(this.form);
        },
        // 选择温控架向form中添加数据
        tempControl(value) {
            this.form.stoveCode = value
            console.log(this.form);
        },
        // 文件改变时触发
        handleChange(num,file){
            this['fileList'+num] = [file.raw];
        },
        // 删除文件后触发
        handleRemove(num,name){
            this['fileList'+num] = []
            this.form[name] = ''
        }
    }
}
</script>

<style  scoped>
.tpc .el-time-spinner__wrapper {
    width: 100% !important;
}

.el-time-spinner__wrapper .el-scrollbar {
    display: none !important;
}

.card-table {
    padding: 0;
}

.header {
    display: flex;
    align-items: center;
    padding: 18px;
    border-bottom: thin solid rgb(228, 236, 240);

    .goBackIcon {
        cursor: pointer;
        color: $primary;
    }
}

.main {
    padding: 12px 24px;
}

.footer {
    padding: 24px 24px 24px 40px;
}

.pagin {
    display: flex;
    justify-content: space-between;
    padding: 24px 12px 12px 24px;
}

.pagin  .el-pager .active {
    background-color: $primary !important;
}

.selectTableRow_style.selected {
    background: $primary;
    transform: rotate(0deg) !important;
}

.selectTableRow_style {
    transition: all 0.25s;
    transform: rotate(-90deg);
    padding: 2px;
    border-radius: 6px;
    border-color: $primary;

     .el-icon-check {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }
}

.el-table__row {
    cursor: pointer;
}

.el-collapse {
    border: 0px !important;
}

.el-collapse-item__header {
    justify-content: flex-start;
    border: 0px !important;
    line-height: 2.5;
}

.el-collapse-item__arrow {
    font-size: 16px;
    margin-left: 24px;
}

.el-collapse-item__content {
    margin: 24px;
    margin-bottom: 12px;
}

.selectTableRow_style.selected {
    background: $primary;
    transform: rotate(0deg) !important;
}

.selectTableRow_style {
    transition: all 0.25s;
    transform: rotate(-90deg);
    padding: 2px;
    border-radius: 6px;
    border-color: $primary;

     .el-icon-check {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }
}

.text {
    color: #999;
}
.upload-demo{
    margin:12px;
}
</style>
